#軸のラベル付け

グラフを作成するときは、閲覧者にどのデータを表示しているのかを伝える必要があります。これを行うには、軸にラベルを付ける必要があります。

#スケールタイトルの設定

名前空間:options.scales[scaleId].title、スケールタイトルのオプションを定義します。これはデカルト軸にのみ適用されることに注意してください。

名前	タイプ	デフォルト	説明
`display`	`boolean`	`false`	true の場合、軸のタイトルを表示します。
`align`	`string`	`'center'`	軸タイトルの配置。可能なオプションは次のとおりです`'start'`、`'center'`と`'end'`
`text`	`string`\|`string[]`	`''`	タイトルのテキスト。 (つまり、「人数」または「回答の選択肢」)。
`color`	`Color`	`Chart.defaults.color`	ラベルの色。
`font`	`Font`	`Chart.defaults.font`	見るフォント
`padding`	`Padding`	`4`	スケールラベルの周囲に適用するパディング。それだけ`top`、`bottom`と`y`が実装されています。

#カスタム目盛フォーマットの作成

データ型に関する情報を含めるために目盛りを変更することもよくあります。たとえば、ドル記号 (「$」) を追加します。これを行うには、ticks.callback軸構成のメソッド。

このメソッドは 3 つの引数を受け取ります。

value- のティック値内部データ形式関連するスケールの。時間スケールの場合はタイムスタンプです。
index- ティック配列内のティックインデックス。
ticks- すべてを含む配列ティックオブジェクト。

メソッドの呼び出しはスケールに限定されます。thisメソッド内にはスケールオブジェクトがあります。

コールバックが返された場合nullまたundefined関連付けられたグリッド線は非表示になります。

ヒント

のカテゴリ軸は、折れ線グラフと棒グラフのデフォルトの X 軸であり、index内部データ形式として。ラベルにアクセスするには、次を使用します。this.getLabelForValue(value)。API: getLabelForValue

次の例では、Y 軸のすべてのラベルが先頭にドル記号を付けて表示されます。

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                ticks: {
                    // Include a dollar sign in the ticks
                    callback: function(value, index, ticks) {
                        return '$' + value;
                    }
                }
            }
        }
    }
});

オーバーライドすることに注意してくださいticks.callbackは、ラベルのすべてのフォーマットに責任があることを意味します。ユースケースによっては、デフォルトのフォーマッタを呼び出して、その出力を変更することが必要になる場合があります。上の例では、次のようになります。

                        // call the default formatter, forwarding `this`
                        return '$' + Chart.Ticks.formatters.numeric.apply(this, [value, index, ticks]);